<template>
  <div>
    <div class="container">
      <h3>
        角色管理
      </h3>
      <el-divider />
      <div class="handle-box">

      </div>
      <div class="handle-box">
        <el-button type="primary" size="small" :icon="Plus" @click="openDialog(null)">新增</el-button>
      </div>
      <el-table :stripe="true" :data="tableInfo.records" border class="table" ref="multipleTable"
                header-cell-class-name="table-header">
        <el-table-column type="index" width="55" label="序号"/>
        <el-table-column :show-overflow-tooltip="true" v-for="item in tableColumnData" :width="item.width" align="center"  :prop="item.prop"
                         :label="item.label"></el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button type="warning" size="small" :icon="Edit" @click="openDialog(scope.row)">
              编辑
            </el-button>
            <el-button type="danger" size="small" :icon="Delete" @click="remove(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="tableInfo.current"
            :page-size="tableInfo.size"
            :total="tableInfo.total"
            @current-change="currentChange"
            @size-change="sizeChange"
        ></el-pagination>
      </div>
    </div>
    <div>
      <el-dialog
          v-model="dialogInfo.visit"
          :title="dialogInfo.title"
          width="500"
          destroy-on-close="true"
      >
        <el-divider />
        <el-form :model="dialogInfo.form" label-width="auto" style="max-width: 600px">
          <el-form-item label="角色名称">
            <el-input v-model="dialogInfo.form.name"/>
          </el-form-item>
          <el-form-item label="角色描述">
            <el-input v-model="dialogInfo.form.described" type="textarea" />
          </el-form-item>
          <el-form-item label="菜单权限">
            <el-tree
                style="max-width: 600px"
                :data="menuList"
                show-checkbox
                :default-checked-keys="dialogInfo.form.menuList"
                highlight-current
                @check="handleCheck"
                ref="treeRef"
                node-key="id"
                :props="defaultProps"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogInfo.visit = false">取消</el-button>
            <el-button type="primary" @click="save()">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>

  </div>
</template>

<script setup lang="ts" name="basetable">
import {ref} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus';
import {Delete, Edit, Search, Plus} from '@element-plus/icons-vue';
import {getRoleMenu, queryRolePage, removeRole, saveRole} from '@/api/role'
import {getMenuList} from "@/api/menu";

const defaultProps = {
  children: 'children',
  label: 'title',
}
const menuList = ref()

/**列表内容*/
const tableColumnData = ref([
  {
    prop: 'name',
    label: '角色名称',
    width: '150'
  },

  {
    prop: 'described',
    label: '角色描述',

  }

])
/**列表信息*/
const tableInfo = ref(
    {
      current: 1,
      size: 10,
      total: 0,
      username: '',
      records: []
    }
)

const dialogInfo = ref({
  visit: false,
  title: '',
  form: {
    id: '',
    name: '',
    described: '',
    menuList: [

    ]
  }
})
const treeRef = ref(null);

/**
 * 获取已勾选内容
 * @param data
 * @param checked
 * @param indeterminate
 */
const handleCheck = (data:Object, checked:Object, indeterminate:Object) => {
  // 可以在这里处理勾选事件
  const checkedNodes = treeRef.value.getCheckedNodes();
  dialogInfo.value.form.menuList = []
  checkedNodes.forEach(item=>{
    dialogInfo.value.form.menuList.push(item.id)
  })
};

const search = () => {
  queryRolePage(tableInfo.value.current, tableInfo.value.size,  tableInfo.value)
}
const currentChange = (pageNo: number) => {
  console.log("页数变化")
  tableInfo.value.current = pageNo
  search()
}

const sizeChange = (pageSize: number) => {
  console.log("页数大小变化")
  tableInfo.value.size = pageSize
  search()
}

const reset = () => {
  console.log("重置")
  tableInfo.value.current = 1
  tableInfo.value.size = 10
  tableInfo.value.username = ''
  search()
}

const remove = (id: number) => {
  console.log("删除")
  ElMessageBox.confirm('确定要删除吗？', '提示', {
    type: 'warning'
  }).then(() => {
    removeRole(id).then(res => {
      ElMessage.success("删除成功")
      search()
    })
  })
}

const openDialog = (data:Object) => {
  if (data != null) {
    dialogInfo.value.title = '修改角色'
    dialogInfo.value.form = data
    getRoleMenu(data.id).then(res=>{
      dialogInfo.value.form.menuList = res.data
    })
  }else{
    dialogInfo.value.title = '新增角色'
    dialogInfo.value.form = {
      id: '',
      name: '',
      described: '',
      menuList: [

      ]
    }
  }
  dialogInfo.value.visit = true
}

const save = () => {
  saveRole(dialogInfo.value.form).then(res => {
    dialogInfo.value.visit = false
    ElMessage.success("操作成功")
    search()
    dialogInfo.value.form = {
      id: '',
      name: '',
      described: '',
      menuList: [
      ]
    }
  })
}

/**
 * 页面初始化调用方法
 */
search()
getMenuList().then(res=>{
  menuList.value = res.data
})

</script>

<style scoped>

.handle-box {
  margin-bottom: 10px;
}

.table {
  width: 100%;
  font-size: 14px;
}

</style>

